<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content{
      width: 700px;
      height: 400px;
      text-align: center;
      border: 1px solid rgba(0, 0, 0, 0.478);
    }
    .content h2{
      top: 0;
      margin-bottom: 40px;
    }
    .content h3{
      font-weight: 400;
      text-align: left;
      padding-left: 10%;
      font-size: 20px;
    }
    .content button{
      width: 100px;
      height: 30px;
      margin: 50px;
      border-radius: 5px;
      cursor: pointer;
    }
    .content button:hover{
      background-color: rgb(176, 169, 169);
    }
  </style>
</head>
<body>
  <div class="content">
    <h2>随机问答</h2>
    <h3>问题是: 现在阶段来说，函数中的this指向谁？</h3>
    <button>开始</button>
    <button disabled>结束</button>
  </div>
  <script>
    let problem = [
      '你最喜欢的电影是什么？为什么？',
      '如果你能拥有任何超能力，你希望拥有哪种能力？为什么？',
      '你认为成功的定义是什么？',
      '如果可以和任何历史人物共进晚餐，你会选择谁？为什么？',
      '你喜欢的书籍或小说是哪一本？它给你带来了什么启发？',
      '假如你能重新开始一项技能学习，你会选择什么？你觉得为什么是时候开始学习它了？',
      '如果你有机会移居到另一个国家，你会选择哪里？这个地方有什么吸引你的地方？',
      '你是如何看待“失败”的？它对你来说是学习的机会还是打击？',
      '你认为未来十年内，科技会带来哪些重大变化？',
      '如果你有一天能够回到过去，你最想改变或重新经历的是什么？'
    ]
    //获取对象
    const question = document.querySelector('h3')
    const btn = document.querySelectorAll('button')
    const begin = btn[0]
    const end = btn[1]
    let clock
    let num
    //添加监听
    begin.addEventListener('click',function(){
      if(problem.length === 1){
        begin.disabled = false
        end.disabled = false
        alert('问题已被抽完，如果需要再次抽取请刷新')
        return
      }

      end.disabled = false
      begin.disabled = true
      
      // 启动间歇函数
      clock = setInterval(function(){
        num = Math.floor(Math.random()*problem.length)
        question.innerHTML = problem[num]
      },100)
      
    })
    end.addEventListener('click',function(){
      // 关闭间歇函数
      clearInterval(clock)
      begin.disabled = false
      end.disabled = true
      //抽到问题,下次移除
      problem.splice(num,1)
    })
  </script>
</body>
</html>